<template>
    <el-table @selection-change="handleSelectionChange" :data="tableStore.tableIncomeList" :height="tableHeight" stripe style="width: 100%" class="m-t-15 f15">
        <el-table-column
            type="selection"
            width="55"
            :selectable="isSelectable"
            v-if="select"
        />
        <el-table-column prop="" label="序号" width="60" v-if="select">
            <template #default="scope">
                <div>{{(tableStore.pagination.currentPage  - 1) * tableStore.pagination.pageSize + scope.$index + 1 }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="balance_acct_id" label="电子账簿ID" width="180">
            <template #default="scope">
                <div>{{ scope.row.balance_acct_id }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="startTime" label="记账时间" width="160" >
            <template #default="scope">
                <div class="o5">{{ scope.row.startTime }}</div>
            </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额" width="150" >
            <template #default="scope">
                <el-text type="danger">{{ numFormat((scope.row.amount / 100).toFixed(2)) }}元</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="trade_type" label="交易类型" width="120">
            <template #default="scope">
                <el-text type="primary">
                    {{ tableStore.isIncomeType(scope.row.trade_type) }}
                </el-text>
            </template>
        </el-table-column>
        <el-table-column prop="pay_bank_acct_name" label="转出方银行账户名称" width="150" />
        <el-table-column prop="pay_bank_acct_no" label="转出方银行账号" width="190" />
        <el-table-column prop="pay_bank_name" label="转出方银行名称" width="200" />
        <el-table-column prop="pay_bank_code" label="转出方银行编号" width="150" />
        <el-table-column prop="pay_bank_branch_code" label="转出方银行联行号" width="150" />
        <el-table-column prop="balance_acct_no" label="关联银行账号" width="200" />
        <el-table-column prop="bank_memo" label="银行附言" width="200">
            <template #default="scope">
                <el-tooltip
                 popper-style="width: 200px;"
                    class="box-item"
                    effect="dark"
                    :content="scope.row.bank_memo"
                    placement="top-end"
                >
                    <div class="of">
                        {{ scope.row.bank_memo }}
                    </div>
                </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column prop="status" label="交易状态" width="100">
            <template #default="scope">
                <el-text type="success" v-if="scope.row.status == 'succeeded'">成功</el-text>
                <el-text type="info" v-else>{{ scope.row.status }}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="transaction_no" label="交易流水号" width="200" />
        <el-table-column prop="tradeId" label="系统订单号" width="200" />
        <el-table-column prop="tradeId" label="操作" width="90" fixed="right">
            <template #default="scope">
                <el-button type="primary" @click="downloadData(scope.row.tradeId)" v-if="isSelectable(scope.row)">下载</el-button>
                <el-tooltip
                    effect="dark"
                    content="当日回执和没有流水号不能下载"
                    placement="top"
                    v-else
                >
                    <el-button type="primary" disabled>下载</el-button>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>
    <div class="m-t-15 flex flex-jus-between" v-if="select">
        <div>
            <el-tooltip
                class="box-item"
                effect="dark"
                content="下载当前条件的全部数据"
                placement="top-start"
            >
                <el-button type="primary" @click="downloadAllData">全部下载</el-button>
            </el-tooltip>
            <el-tooltip
                v-if="tableStore.downloadBtnShow"
                class="box-item"
                effect="dark"
                content="下载当前勾选的数据"
                placement="top-start"
            >
                <el-button type="primary" @click="downloadMoreData">下载选中项</el-button>
            </el-tooltip>
        </div>
        <el-pagination
            v-model:current-page="tableStore.pagination.currentPage"
            v-model:page-size="tableStore.pagination.pageSize"
            :page-sizes="[20, 50, 100]"
            :disabled="tableStore.pagination.disabled"
            :background="tableStore.pagination.background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableStore.pagination.total"
            @size-change="changeSizeChange"
            @current-change="changeCurrentChange"
        />
    </div>
</template>
<script setup lang="ts">
    import { useTableStore } from '@/stores/useTableStore'
    import { 
        numFormat,
        downloadData,
        handleSelectionChange,
        downloadMoreData,
        isSelectable,
        handleSizeChange,
        handleCurrentChange
    } from "@/utils/func";
    const tableStore = useTableStore()
    defineProps([
        'select',
        'tableHeight',
    ])
    // 表格数据
    import useTableIncome from '@/hooks/useTableIncome'
    const {
        downloadAllData,
    } = useTableIncome()
    function changeSizeChange(val:number){
        tableStore.getTableIncomeList
        handleSizeChange(val,tableStore.getTableIncomeList)
    }
    function changeCurrentChange(val:number){
        handleCurrentChange(val,tableStore.getTableIncomeList)
    }
</script>
<style>
.of {
    width:100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.custom-tooltip {
  width: 200px;
}
</style>